<template>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:v="https://svgstorm.com"
    :viewBox="viewBox"
    :width="viewportWidth"
    :height="calculatedHeight"
  >
    <g :fill="color" fill-opacity="1.00" stroke="None" style="&#10;">
      <path
        d=" M 0.00 30.00  L 0.00 295.00 L 1920.00 295.00 L 1920.00 291.00 C 1863.94 276.28 1813.94 260.88 1756.99 247.01 C 1700.05 233.14 1646.55 219.93 1586.93 210.07 C 1527.30 200.22 1463.14 191.34 1400.00 189.00 C 1336.86 186.66 1257.48 188.46 1194.00 188.00 C 1130.52 187.54 1060.13 184.62 1000.33 175.67 C 940.53 166.72 890.52 151.32 835.78 133.22 C 781.03 115.13 736.27 97.64 682.93 78.07 C 629.58 58.51 582.70 41.92 526.98 27.02 C 471.25 12.13 405.14 2.78 346.00 0.00 L 256.00 0.00 C 169.75 4.45 84.48 16.97 0.00 30.00 Z"
      />
    </g>
  </svg>
</template>

<script>
export default {
  props: {
    color: {
      default: "#f5f9f7",
    },
  },
  data() {
    return {
      calculatedHeight: "295",
      viewportWidth: "1920",
      viewBox: "0 0 1920 295",
    };
  },
  mounted() {
    this.calculateHeight();
    window.addEventListener("resize", this.calculateHeight);
  },
  beforeDestroy() {
    // 在组件销毁前移除事件监听器
    window.removeEventListener("resize", this.calculateHeight);
  },
  methods: {
    calculateHeight() {
      this.viewportWidth = document.body.clientWidth;
      const originalAspectRatio = 1920 / 295;
      this.calculatedHeight = this.viewportWidth / originalAspectRatio;
      this.viewBox = `0 0 ${this.viewportWidth} ${this.calculatedHeight}`;
    },
  },
};
</script>

<style></style>
